import { defineComponent } from 'vue'
import VirtualTable from '@/components/VirtualTable'
import type { TableColumn } from '@/components/VirtualTable/types'

export default defineComponent({
  name: 'DemoApp',
  setup() {
    const columns: TableColumn[] = [
      { key: 'id', title: 'ID', width: 80, fixed: 'left' },
      { key: 'name', title: '名称', minWidth: 150 },
      { key: 'desc', title: '描述', minWidth: 300 },
      { key: 'price', title: '价格', width: 100 },
      { key: 'category', title: '分类', width: 120 }
    ]

    const data = Array.from({ length: 5000 }, (_, i) => ({
      id: i + 1,
      name: `商品 ${i + 1}`,
      desc: '这是一段很长的描述，用于测试可变行高渲染。'.repeat((i % 8) + 1),
      price: (Math.random() * 1000).toFixed(2),
      category: ['A', 'B', 'C'][i % 3]
    }))

    return () => (
      <div style={{ padding: '1rem' }}>
        <VirtualTable
          columns={columns}
          data={data}
          variableRowHeight
          estimatedRowHeight={48}
          style={{ height: '500px', border: '1px solid #ccc' }}
          class="vt-container"
        />
      </div>
    )
  }
})
